<template>
  <div>
    <!-- 组件：图书 -->
    <BookInfo :info="info"></BookInfo>

    <!-- 组件：评论列表 -->
    <CommentList :comments="comments"></CommentList>

    <div class="comment" v-if="showAdd">
      <textarea v-model="comment"
                class="textarea"
                :maxlength="100"
                placeholder="请输入图书评论"
      ></textarea>
      <div class="location">
        地理位置：
        <switch color="#EA5A49" :checked="location" @change="getGeo"></switch>
        <span class="text-primary">{{location}}</span>
      </div>
      <div class="phone">
        手机型号：
        <switch color="#EA5A49" :checked="phone" @change="getPhone"></switch>
        <span class="text-primary">{{phone}}</span>
      </div>
      <button class="btn" @click="addComment">
        评论
      </button>
    </div>
    <div v-else class="text-footer">
      未登录或者已经评论过拉
    </div>
    <button class="btn" open-type="share">转发给好友</button>
  </div>
</template>
<script>
  import { get, post, showModal } from '@/util'
  // 组件：图书
  import BookInfo from '@/components/BookInfo'
  // 组件：评论列表
  import CommentList from '@/components/CommentList'
  export default {
    components: {
      BookInfo,
      CommentList
    },
    data () {
      return {
        // 评论信息
        comments: [],
        // 用户信息
        userinfo: {},
        // 图书id
        bookid: '',
        // 图书信息
        info: {},
        comment: '',
        location: '',
        phone: ''
      }
    },
    mounted () {
      // mpvue获取参数
      this.bookid = this.$root.$mp.query.id
      // 获取图书详情
      this.getDetail()
      // 获取评论列表
      this.getComments()
      const userinfo = wx.getStorageSync('userInfo')
      if (userinfo) {
        this.userinfo = userinfo
      }
    },
    computed: {
      /**
       * 控制表单是否显示
       */
      showAdd () {
        // 未登录
        if (!this.userinfo.openId) {
          return false
        }
        // 评论页面里查到有自己的openid
        if (this.comments.filter(v => v.openid === this.userinfo.openId).length) {
          return false
        }
        return true
      }
    },
    methods: {
      /**
       * 获取图书详情
       * async 异步函数
       * await 同步
       * @returns {Promise.<void>}
       */
      async getDetail () {
        const info = await get('/weapp/bookdetail', {id: this.bookid})

        // 修改标题
        wx.setNavigationBarTitle({
          title: info.title
        })

        this.info = info
      },
      /**
       * 获取评论列表
       */
      async getComments () {
        const comments = await get('/weapp/commentlist', {
          bookid: this.bookid
        })
        this.comments = comments.list || []
      },
      /**
       * 获取地理位置
       *
       *  AK:LBUz48bAA4nfl2qMHGrdmaDGvuQGA6FI
       *  http://api.map.baidu.com/geocoder/v2/
       */
      getGeo (e) {
        const ak = 'LBUz48bAA4nfl2qMHGrdmaDGvuQGA6FI'
        let url = 'http://api.map.baidu.com/geocoder/v2/'
        if (e.target.value) {
          wx.getLocation({
            success: geo => {
              // geo是获取到地址位置信息
              // console.log(geo)
              wx.request({
                url,
                data: {
                  ak,
                  location: `${geo.latitude}, ${geo.longitude}`,
                  output: 'json'
                },
                success: res => {
                  if (res.data.status === 0) {
                    this.location = res.data.result.addressComponent.city
                  } else {
                    this.location = '未知地理'
                  }
                }
              })
            }
          })
        } else {
          this.location = ''
        }
      },
      /**
       * 获取手机型号
       * @param e
       */
      getPhone (e) {
        if (e.target.value) {
          // 同步获取
          const phoneInfo = wx.getSystemInfoSync()
          this.phone = phoneInfo.model
        } else {
          this.phone = ''
        }
      },
      /**
       * 提交评论
       */
      addComment () {
        if (!this.comment) {
          return
        }

        const data = {
          // 用户的openid
          openid: this.userinfo.openId,
          // 图书id
          bookid: this.bookid,
          // 评论的内容
          comment: this.comment,
          // 手机型号
          phone: this.phone,
          // 地理位置
          location: this.location
        }
        try {
          post('/weapp/addcomment', data)
          this.comment = ''
          this.getComments()
        } catch (e) {
          showModal('失败', e.msg)
        }
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
.comment{
  margin-top: 10px;
  .textarea{
    width: 730rpx;
    background-color: #eee;
    padding: 10rpx;
  }
  .location{
    margin-top: 10px;
    padding: 5px 10px;
  }
  .phone{
    margin-top: 10px;
    padding: 5px 10px;
  }
}
</style>
